<template lang="jade">
  .vue__component__root
    div.weui_media_box.cal-event
      h4.weui_media_title.cal-event-header {{currWorkout.name || "请选择日期"}}
      p.weui_media_desc.cal-event-detail {{currWorkout.description}}
      button.weui_btn.weui_btn_primary.weui_btn_disabled(v-if="currWorkout.pivot && currWorkout.pivot.is_complete === 1") 已完成
      button.weui_btn.weui_btn_primary(v-else-if="currWorkout.pivot && currWorkout.pivot.is_complete === 0" @click="startScan") 扫描设备
      button.weui_btn.weui_btn_primary.weui_btn_disabled(v-else) 请选择日期
    div.cal-header
      div.leftArrow(@click="preMonth")
        i.fa.fa-chevron-left
      span.calendarTitle()
        {{currYearMonth}}
      div.rightArrow(@click="nextMonth")
        i.fa.fa-chevron-right
    
    div.cal-body
        div.week
            span(v-for="name in weekName") {{name}}
        div.cal-dates-panel
          div(v-if="workouts[currYearMonth]")
            div.inline-div(v-for="day in dateList[currYearMonth]" )
              span.day(v-if="!workouts[currYearMonth][day]") {{day === 0 ? '' : day}}
              span.day.cal-event-completed(v-else-if="workouts[currYearMonth][day].pivot.is_complete === 1" @click="selectDate(day)")
                span.cal-event-selected(v-if="day === selectedDate") {{day}}
                span(v-else) {{day}}
              span.day.cal-event-uncompleted(v-else @click="selectDate(day)")
                span.cal-event-selected(v-if="day === selectedDate") {{day}}
                span(v-else) {{day}}
          div(v-else)
            div.inline-div(v-for="day in dateList[currYearMonth]" )
              span.day {{day === 0 ? '' : day}}
</template>
<script>
/*global $*/

import tool from './../tool/tool.js';
import Vue from 'vue';
import {mapGetters, mapActions} from 'vuex';

export default {
  methods: {
    startScan () {
      alert('#startScan: scan starting...')
    },
    refresh () {
      let workouts = this.$store.getters.workouts
      let newWorkouts = tool.constructWorkouts(workouts);

      this.clearData();
      this.initialCalendar();

      this.$store.dispatch('setNewWorkouts', newWorkouts)
      this.$store.dispatch('setCurrWorkout', newWorkouts[this.currYearMonth][this.currDate] || {});
    },

    clearData () {
      this.$store.dispatch('setYearMonth', '')
      this.$store.dispatch('setSelectedDate', null);
    },

    selectDate(date) {
      // console.log(date)
      let currWorkout = this.workouts[this.currYearMonth][date] || {};

      this.$store.dispatch('setSelectedDate', date);
      this.$store.dispatch('setCurrWorkout', currWorkout);
    },
    preMonth() {
      this.changeYearMonth(false);
    },

    nextMonth() {
      this.changeYearMonth(true);
    },

    changeYearMonth(isNext) {
      let {year, month} = tool.parseYearMonthString(this.currYearMonth);
      let newYear;
      let newMonth;

      if(isNext) {
        newYear = month === 12 ? year + 1 : year;
        newMonth = month === 12 ? 1 : month + 1;
      } else {
        newYear = month === 1 ? year - 1 : year;
        newMonth = month === 1 ? 12 : month - 1;
      }

      let newYearMonth = tool.getYearMonthString(newYear, newMonth);
      let oldDateList = this.dateList;
      if(!this.dateList[newYearMonth]) {
        let newDateListItem = tool.getDayListObjOfMonth(newYear, newMonth);
        Vue.set(this, 'dateList', Object.assign({}, oldDateList, newDateListItem))
      }

      this.$store.dispatch('setYearMonth', newYearMonth);
      this.$store.dispatch('setCurrWorkout', this.workouts[newYearMonth] && this.workouts[newYearMonth][this.currDate] || {});
    },

    initialCalendar() {
      let curr = new Date();
      let currYear = curr.getFullYear();
      let currMonth = curr.getMonth();
      let currDate = curr.getDate();

      this.currDate = currDate;
      this.$store.dispatch('setYearMonth', tool.getYearMonthString(currYear, currMonth + 1))
      this.$store.dispatch('setSelectedDate', currDate);
    },

    initialDateList() {
      let {year, month} = tool.parseYearMonthString(this.currYearMonth)
      this.dateList = tool.getDayListObjOfMonth(year, month)
    }
  },
  computed: {
    ...mapGetters({
      workouts: 'newWorkouts',
      currYearMonth: 'currYearMonth',
      selectedDate: 'selectedDate',
      currWorkout: 'currWorkout'
    })
  },
  props: [],
  watch: {},
  components: {},
  events: {},
  created() {},
  data() {
    return {
      weekName: ['日', '一', '二', '三', '四', '五', '六'],
      dateList: {},
      currDate: {},
      selectedWorkout: {}
    }
  },
  mounted() {
    this.initialCalendar();
    this.initialDateList();
  }
}
</script>
<style scoped>

.cal-header {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  font-size: 1.2rem;
}

.leftArrow, .rightArrow {
  width: 2rem;
  padding: 5px;
  text-align: center;
  color: #04be02;
}

.cal-body .week, .cal-body .cal-dates-panel {
  width: 100%;
  overflow: hidden;
}

.cal-body .week span{
  position: relative;
  float: left;
  width: 14.285%;
  text-align: center;
  font-size: 1.2rem;
}

.cal-body .cal-dates-panel .inline-div {
  /* display: inline-block; */
  position: relative;
  float: left;
  width: 14.285%;
  text-align: center;
  font-size: 1rem;
  padding-bottom: 5px;
}

.inline-div .day{
  width: 36px;
  display: inline-block;
  line-height: 2rem;  
}

.cal-event-completed {
  background: #dddddd;
}

.cal-event-uncompleted {
  border: solid 1px #04be02;
  margin: -1px;
}

.cal-event-selected {
  background: #04be02;
  width: 36px;
  display: inline-block;
}
/* 
.cal-event {
  width: 100%;
  margin: 15px 0;
} */

.cal-event-detail {
  height: 4rem;
  overflow: scroll;
}

.cal-event .cal-event-btn{
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  text-align: center
}

/* .cal-event-clickable {
  background: rgb(101, 226, 62);
}

.cal-event-unclickable {
  background: #dddddd;
} */
</style>
